/* StickersFX — Editor Visual Styles (v2 Professional) */

/* ══ DESIGN TOKENS ══
   Alineados con el rediseño web: ink como active color, orange-hot como CTA */
:root {
  --sfx-primary: #0a0a0a;                   /* active border/text: ink */
  --sfx-primary-soft: rgba(10, 10, 10, 0.06);
  --sfx-primary-glow: rgba(10, 10, 10, 0.12);
  --sfx-accent: #ff3c00;                    /* CTA: orange-hot */
  --sfx-magenta: #ff4db8;
  --sfx-green: #00e5c3;                     /* cyan como success */

  --sfx-surface-1: #faf8f3;
  --sfx-surface-2: #f5f3ee;
  --sfx-surface-3: #ece8dc;
  --sfx-surface-preview: linear-gradient(180deg, #e8e7e3 0%, #d6d5d1 60%, #cccbc7 100%);

  --sfx-text: #1a1a1a;
  --sfx-text-2: #444;
  --sfx-text-muted: rgba(0,0,0,0.62);  /* WCAG AA contrast (was 0.45 → ratio 3.0, now 5.4) */
  --sfx-text-faint: rgba(0,0,0,0.2);

  --sfx-border: rgba(0,0,0,0.08);
  --sfx-border-2: rgba(0,0,0,0.14);
  --sfx-border-active: var(--sfx-primary);

  --sfx-shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --sfx-shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --sfx-shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --sfx-shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
  --sfx-shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  --sfx-radius-xs: 4px;
  --sfx-radius-sm: 6px;
  --sfx-radius-md: 10px;
  --sfx-radius-lg: 14px;
  --sfx-radius-xl: 20px;

  --sfx-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sfx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sfx-transition-fast: 0.15s var(--sfx-ease);
  --sfx-transition: 0.25s var(--sfx-ease);
  --sfx-transition-slow: 0.4s var(--sfx-ease);

  --sfx-font-display: 'Inter', -apple-system, sans-serif;
  --sfx-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --sfx-font-body: 'Inter', -apple-system, sans-serif;
}

/* ══ LAYOUT ══ */
.editor-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ══ CANVAS AREA ══ */
.editor-canvas-area {
  position: relative;
  z-index: 1;
}

.editor-canvas-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background-color: #e8e8e8;
  background-image:
    linear-gradient(45deg, #dedede 25%, transparent 25%),
    linear-gradient(-45deg, #dedede 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #dedede 75%),
    linear-gradient(-45deg, transparent 75%, #dedede 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}

.editor-canvas-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#canvasDesign {
  z-index: 2;
}

#canvasProduct {
  z-index: 1;
}

/* ══ EFFECTS OVERLAY ══ */
.canvas-effects {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 12px;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.canvas-effects.fx-spotuv {
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  animation: shineMove 3s ease-in-out infinite;
}

.canvas-effects.fx-matte {
  background: rgba(0,0,0,0.03);
}

.canvas-effects.fx-emboss {
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.06), inset 0 -2px 8px rgba(255,255,255,0.04);
}

.canvas-effects.fx-texture {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='rgba(0,0,0,0.04)'/%3E%3C/svg%3E");
}

@keyframes shineMove {
  0%, 100% { background-position: -200% 0; }
  50% { background-position: 200% 0; }
}

/* ══ TRANSFORM HANDLES ══ */
.canvas-handles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: none;
  touch-action: none;
  cursor: grab;
}

.handle-box {
  position: absolute;
  border: 1.5px dashed var(--blue, #4D7CFF);
  pointer-events: none;
  transform-origin: center center;
}

.handle-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid var(--sfx-primary);
  border-radius: 50%;
  cursor: nwse-resize;
  pointer-events: all;
  touch-action: none;
  padding: 10px;
  margin: -11px;
  background-clip: content-box;
  box-shadow: var(--sfx-shadow-sm);
  transition: transform var(--sfx-transition-fast), box-shadow var(--sfx-transition-fast);
}

.handle-corner:hover {
  transform: scale(1.4);
  box-shadow: 0 0 0 4px var(--sfx-primary-glow), var(--sfx-shadow-sm);
}

.handle-corner.tl { top: -1px; left: -1px; }
.handle-corner.tr { top: -1px; right: -1px; cursor: nesw-resize; }
.handle-corner.bl { bottom: -1px; left: -1px; cursor: nesw-resize; }
.handle-corner.br { bottom: -1px; right: -1px; }

.handle-rotate {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid var(--sfx-primary);
  border-radius: 50%;
  cursor: grab;
  pointer-events: all;
  touch-action: none;
  padding: 8px;
  margin: -9px;
  background-clip: content-box;
  box-shadow: var(--sfx-shadow-sm);
  transition: transform var(--sfx-transition-fast), box-shadow var(--sfx-transition-fast);
}

.handle-rotate:hover {
  transform: translateX(-50%) scale(1.3);
  box-shadow: 0 0 0 4px var(--sfx-primary-glow), var(--sfx-shadow-sm);
}

.handle-rotate::before {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 50%;
  width: 1.5px;
  height: 18px;
  background: var(--sfx-primary);
  transform: translateX(-50%);
  opacity: 0.5;
}

.handle-move-area {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  cursor: grab;
  pointer-events: all;
  touch-action: none;
}

.handle-move-area:active { cursor: grabbing; }

/* Make canvas container interactive in edit mode */
.editor-edit-mode .editor-canvas-container {
  cursor: grab;
  touch-action: none;
}

.editor-edit-mode .editor-canvas-container:active { cursor: grabbing; }

/* ══ MODE TOGGLE ══ */
.editor-mode-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg2, #f0f0f0);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 10px;
  width: fit-content;
}

.mode-btn {
  padding: 7px 18px;
  font-size: var(--fs-xs);
  font-weight: 600;
  border: none;
  border-radius: var(--sfx-radius-sm);
  background: transparent;
  color: var(--sfx-text-muted);
  cursor: pointer;
  transition: background var(--sfx-transition-fast), color var(--sfx-transition-fast), box-shadow var(--sfx-transition-fast);
  font-family: var(--sfx-font-display);
}

.mode-btn:hover { color: var(--sfx-text-2); }

.mode-btn.active {
  background: var(--ink, #0a0a0a);
  color: var(--cream, #faf8f3);
  box-shadow: var(--sfx-shadow-sm);
  border-radius: var(--sfx-radius-sm);
  padding: 8px 20px;
}

/* ══ PREVIEW 3D MODE ══ */
.editor-preview-3d {
  width: 100%;
  aspect-ratio: 1;
  background: var(--sfx-surface-preview);
  border-radius: var(--sfx-radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
/* Editorial pattern visible only when no design loaded (.upload-overlay shown) */
.editor-preview-3d:has(.upload-overlay:not(.hidden))::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 1;
}
/* Ghost sticker behind dropzone */
.editor-preview-3d:has(.upload-overlay:not(.hidden))::after {
  content: '';
  position: absolute;
  width: 56%;
  aspect-ratio: 1;
  border: 2.5px dashed rgba(0,0,0,0.16);
  border-radius: 24px;
  transform: rotate(-4deg);
  pointer-events: none;
  z-index: 2;
}

.preview-3d-scene {
  position: relative;
  width: 85%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 500px;
  perspective-origin: 50% 45%;
}

.preview-3d-shadow {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%) translate(var(--shadow-x, 0px), var(--shadow-y, 0px));
  width: 65%;
  height: 24px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.10) 35%, transparent 70%);
  filter: blur(10px);
  transition: transform 0.08s ease-out, width 0.08s ease-out, opacity 0.08s ease-out;
}

.preview-3d-sticker {
  position: relative;
  transform: rotateX(8deg) rotateY(-3deg);
  transform-style: preserve-3d;
  transition: transform 0.08s ease-out;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,0.12))
    drop-shadow(0 2px 4px rgba(0,0,0,0.08))
    drop-shadow(0 6px 16px rgba(0,0,0,0.10))
    drop-shadow(0 16px 40px rgba(0,0,0,0.12));
}

.preview-3d-sticker canvas {
  display: block;
  max-width: 100%;
  height: auto;
}


/* Dynamic light reflection — moves with mouse via JS */
/* Gloss is now painted in canvas, not as overlay div */
.preview-3d-gloss {
  display: none;
}


/* Click hint — only show when design is loaded (scene visible) */
.preview-3d-scene::after {
  content: 'Click para editar';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-2xs);
  color: rgba(0,0,0,0.2);
  font-family: var(--font-mono, monospace);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.preview-3d-scene:hover::after { opacity: 1; }

.preview-comparison {
  width: min(94%, 760px);
  max-width: none;
  align-items: stretch;
  gap: 12px;
  perspective: none;
}

.preview-comparison::after {
  display: none;
}

.preview-card {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--sfx-radius-md);
  background: var(--bg);
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

.preview-card figcaption {
  align-self: flex-start;
  color: var(--ink2);
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preview-card > p {
  min-height: 2.8em;
  margin: 0;
  color: var(--ink4);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  text-align: center;
}

.product-mockup-stage,
.preview-sticker-stage {
  position: relative;
  width: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-mockup-stage img,
.product-mockup-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-mockup-stage canvas {
  z-index: 2;
}

.preview-sticker-stage .preview-3d-sticker {
  width: min(82%, 260px);
}

.preview-sticker-stage .dim-width {
  bottom: 6px;
}

.preview-sticker-stage .dim-height {
  right: -3px;
}

/* ══ DIMENSION LABELS with arrows (like StickerApp) ══ */
.dim-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: rgba(0,0,0,0.5);
  white-space: nowrap;
  padding: 0 4px;
  background: linear-gradient(180deg, #e6e5e1, #d4d3cf);
}

/* Dimensions visible in both modes */

/* Width: below sticker with horizontal arrow */
.dim-width {
  position: absolute;
  bottom: -28px;
  left: 5%;
  right: 5%;
  pointer-events: none;
}

.dim-arrow-h {
  display: flex;
  align-items: center;
  width: 100%;
}

.dim-line-h {
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.3);
}

.dim-end-h {
  width: 1px;
  height: 10px;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}

/* Height: left of sticker with vertical arrow */
.dim-height {
  position: absolute;
  left: -32px;
  top: 5%;
  bottom: 5%;
  pointer-events: none;
}

.dim-arrow-v {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.dim-line-v {
  flex: 1;
  width: 1px;
  background: rgba(0,0,0,0.3);
}

.dim-end-v {
  height: 1px;
  width: 10px;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}

/* ══ EDIT MODE (like StickerApp: solid gray bg, sticker centered, clean) ══ */
.editor-edit-mode {
  position: relative;
}

.edit-rulers {
  display: block;
}

/* Rulers hidden — using dimension labels instead (like StickerApp) */
.ruler { display: none; }

.ruler-mark {
  position: absolute;
  font-size: 8px;
  font-family: var(--font-mono, monospace);
  color: var(--ink4, #999);
}

.ruler-h .ruler-mark {
  bottom: 2px;
  border-left: 1px solid rgba(0,0,0,0.15);
  padding-left: 2px;
  height: 10px;
}

.ruler-v .ruler-mark {
  right: 2px;
  border-top: 1px solid rgba(0,0,0,0.15);
  padding-top: 1px;
  width: 10px;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 7px;
}

.editor-edit-mode .editor-canvas-container {
  border-radius: 0;
  background: #e0dfdb;
  border: none;
  background-image: none;
}

/* Edit mode dimension labels with measurement lines (like StickerApp) */
.edit-dim-w {
  position: absolute;
  bottom: 12px;
  left: 15%;
  right: 15%;
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0;
}

.edit-dim-w::before,
.edit-dim-w::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.3);
}

.edit-dim-w::before { margin-right: 6px; }
.edit-dim-w::after { margin-left: 6px; }

.edit-dim-h {
  position: absolute;
  left: 14px;
  top: 15%;
  bottom: 15%;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.edit-dim-h::before,
.edit-dim-h::after {
  content: '';
  flex: 1;
  width: 1px;
  background: rgba(0,0,0,0.3);
}

.edit-dim-h::before { margin-bottom: 4px; }
.edit-dim-h::after { margin-top: 4px; }

.edim-text {
  font-family: var(--sfx-font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: rgba(0,0,0,0.5);
  white-space: nowrap;
}

.edit-dim-h .edim-text {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

/* ══ CANVAS BAR (hidden — clean edit mode like StickerApp) ══ */
.canvas-bar {
  display: none;
}

.canvas-dimensions {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--fs-xs);
  color: var(--ink4, #999);
  letter-spacing: 0.5px;
}

.canvas-toolbar {
  display: flex;
  gap: 4px;
}

.canvas-toolbar button {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  cursor: pointer;
  color: var(--ink3);
  transition: border-color 0.15s, background 0.15s;
}

.canvas-toolbar button:hover {
  border-color: var(--border2);
  background: var(--bg3);
}

/* ══ UPLOAD OVERLAY (centered in preview) ══ */
.upload-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.upload-overlay.hidden { display: none; }

.upload-dropzone-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 44px 56px;
  border: 2.5px solid var(--sfx-primary);
  border-radius: 20px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s cubic-bezier(.16,1,.3,1), background-color .18s ease;
  background: #faf8f3;
  box-shadow: 8px 8px 0 var(--sfx-primary);
  position: relative;
  z-index: 4;
}

.upload-dropzone-center::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1.2px);
  background-size: 12px 12px;
  pointer-events: none;
  opacity: 0.6;
}

.upload-dropzone-center:hover,
.upload-dropzone-center.drag-over {
  background: #ffffff;
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--sfx-accent);
  border-color: var(--sfx-accent);
}

.upload-dropzone-center > * { position: relative; z-index: 2; }

.upload-dropzone-center > svg {
  width: 44px !important;
  height: 44px !important;
  opacity: 0.85 !important;
  stroke-width: 1.6 !important;
}

.upload-title {
  font-size: var(--fs-base);
  font-weight: 800;
  color: #0a0a0a;
  letter-spacing: -0.01em;
}

.upload-hint {
  font-size: var(--fs-2xs);
  color: #5a5a5a;
  font-family: var(--sfx-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ══ CONFIG PANEL (compact, everything visible) ══ */
.editor-config {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.cfg-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}

.cfg-label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--sfx-text-muted);
  margin-bottom: 6px;
  font-family: var(--sfx-font-display);
}

.cfg-desc {
  font-size: var(--fs-xs);
  color: var(--ink4, #999);
  margin: 2px 0 4px;
  line-height: 1.4;
}

.artwork-preflight {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink2);
}

.artwork-preflight[hidden] {
  display: none;
}

.artwork-preflight__icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.artwork-preflight strong {
  display: block;
  color: currentColor;
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.artwork-preflight p {
  margin: 3px 0 0;
  color: var(--ink3);
  font-size: var(--fs-2xs);
  line-height: 1.45;
}

.artwork-preflight .artwork-preflight__ratio {
  color: currentColor;
  font-weight: 650;
}

.cfg-optional {
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--ink4, #999);
}

/* ══ CONTORNO PADDING SLIDER ══ */
.contorno-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contorno-control input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  background: var(--border2, #ddd);
  border-radius: 2px;
  outline: none;
}

.contorno-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue, #4D7CFF);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.cfg-checkbox-sm {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2xs);
  color: var(--ink4);
  cursor: pointer;
  margin-top: 6px;
}

.contorno-value {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink2, #333);
  min-width: 40px;
  text-align: right;
}

/* ══ QUANTITY (compact horizontal) ══ */
.qty-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.qty-options-compact {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.qty-options-compact .qty-pill {
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-family: var(--sfx-font-mono);
  font-weight: 600;
  border: 1.5px solid var(--sfx-border);
  border-radius: var(--sfx-radius-sm);
  background: var(--sfx-surface-1);
  color: var(--sfx-text-2);
  cursor: pointer;
  transition: border-color var(--sfx-transition-fast), background var(--sfx-transition-fast), color var(--sfx-transition-fast), transform var(--sfx-transition-fast), box-shadow var(--sfx-transition-fast);
  white-space: nowrap;
}

.qty-options-compact .qty-pill:hover {
  border-color: var(--sfx-border-2);
  transform: translateY(-1px);
}

.qty-options-compact .qty-pill:active { transform: scale(0.97); }

.qty-options-compact .qty-pill.active {
  border-color: var(--sfx-primary);
  background: var(--sfx-primary-soft);
  color: var(--sfx-primary);
  box-shadow: 0 0 0 2px var(--sfx-primary-glow);
}

.qty-input {
  width: 65px;
  padding: 5px 8px;
  font-size: var(--fs-2xs);
  font-family: var(--font-mono, monospace);
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}

/* ══ EFFECTS (compact inline) ══ */
.effects-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.effects-compact .fx-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1.5px solid var(--sfx-border);
  border-radius: var(--sfx-radius-sm);
  font-size: var(--fs-xs);
  cursor: pointer;
  background: var(--sfx-surface-1);
  color: var(--sfx-text-2);
  transition: border-color var(--sfx-transition-fast), background var(--sfx-transition-fast), color var(--sfx-transition-fast), transform var(--sfx-transition-fast), box-shadow var(--sfx-transition-fast);
}

.effects-compact .fx-chip:hover {
  border-color: var(--sfx-border-2);
  transform: translateY(-1px);
}

.effects-compact .fx-chip:active { transform: scale(0.97); }

.effects-compact .fx-chip.active {
  border-color: var(--sfx-primary);
  background: var(--sfx-primary-soft);
  color: var(--sfx-primary);
  box-shadow: 0 0 0 2px var(--sfx-primary-glow);
}

.effects-compact .fx-chip input { display: none; }
.effects-compact .fx-badge {
  font-size: var(--fs-2xs);
  font-weight: 700;
  /* WCAG AA contrast: #ff8840 daba ratio 2.8 sobre blanco. #c54400 da 4.6 manteniendo el naranja brand */
  color: var(--orange-strong, #c54400);
  font-family: var(--font-mono, monospace);
}

.cfg-aviso-compact {
  font-size: var(--fs-2xs);
  color: var(--orange-text, #c83000);   /* texto pequeno: tono naranja accesible (WCAG AA) */
  margin-top: 4px;
}

.cfg-info-compact {
  font-size: var(--fs-2xs);
  color: var(--ink4);
  margin-top: 2px;
}

/* ══ PRICE + CTA (sticky at bottom of panel) ══ */
.cfg-price-cta {
  margin-top: auto;
  padding-top: 10px;
  border-top: 2px solid var(--border, rgba(0,0,0,0.08));
}

.cfg-price-box {
  margin-bottom: 12px;
  position: relative;
}

.cfg-price-box::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--ink, #0a0a0a);
  transition: width .55s cubic-bezier(.16,1,.3,1);
}

.cfg-price-box.flash::after {
  width: 64px;
}

.price-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 2px;
}

.price-amount {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--sfx-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.92;
  color: var(--ink, #0a0a0a);
  font-variant-numeric: tabular-nums;
  transform-origin: left bottom;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

.price-amount.flash {
  animation: priceFlash .55s cubic-bezier(.16,1,.3,1);
}

@keyframes priceFlash {
  0% { transform: scale(1); }
  35% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

.price-unit {
  font-size: var(--fs-xs);
  font-family: var(--font-mono, monospace);
  color: var(--ink4, #888);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.price-label {
  font-size: var(--fs-2xs);
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ink4, #888);
  margin-bottom: 6px;
  font-weight: 600;
}

.btn-cta-editor {
  display: block;
  width: 100%;
  padding: 16px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: center;
  /* WCAG AA: --orange-hot (#ff3c00) sobre white da ratio 3.4 (fail).
     Hardcoded #c52a00 da ratio 5.6, manteniendo el rojo-naranja brand. */
  background: #c52a00;
  color: #fff;
  border: 2px solid var(--ink, #0a0a0a);
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
  box-shadow: var(--sfx-shadow-sm);
  letter-spacing: 0.3px;
}

.btn-cta-editor:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink, #0a0a0a);
  background: #e63400;
}

.btn-cta-editor:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--ink, #0a0a0a);
}

.quote-mode-options {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.quote-mode-options legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

.quote-mode-options label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.quote-mode-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.quote-mode-options span {
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--border2);
  border-radius: var(--sfx-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.quote-mode-options input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.quote-mode-options input:focus-visible + span {
  outline: 3px solid var(--sfx-primary-glow);
  outline-offset: 2px;
}

.price-amount--quote {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.quote-cart-feedback {
  min-height: 1.4em;
  color: var(--ink3);
  font-size: var(--fs-xs);
  line-height: 1.4;
  text-align: center;
}

/* Dark mode for compact config */

/* ══ MATERIAL THUMBNAILS ══ */
.material-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mat-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1.5px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--bg, #fff);
  flex: 1;
  min-width: 120px;
}

.mat-option:hover {
  border-color: var(--border2);
}

/* Se alinea con qty-pill y forma-pill, que ya usaban --sfx-primary (tinta).
   El azul era el único selector del configurador fuera del sistema. */
.mat-option.active {
  border-color: var(--sfx-primary);
  background: var(--sfx-primary-soft);
  box-shadow: 0 0 0 2px var(--sfx-primary-glow);
}

.mat-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.mat-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink2, #333);
}

/* ══ FORMA PILLS ══ */
.forma-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.forma-pill {
  padding: 7px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  border: 1.5px solid var(--sfx-border);
  border-radius: var(--sfx-radius-xl);
  background: var(--sfx-surface-1);
  color: var(--sfx-text-2);
  cursor: pointer;
  transition: border-color var(--sfx-transition-fast), background var(--sfx-transition-fast), color var(--sfx-transition-fast), transform var(--sfx-transition-fast), box-shadow var(--sfx-transition-fast);
}

.forma-pill:hover {
  border-color: var(--sfx-border-2);
  transform: translateY(-1px);
  box-shadow: var(--sfx-shadow-xs);
}

.forma-pill:active { transform: translateY(0) scale(0.98); }

.forma-pill.active {
  border-color: var(--sfx-primary);
  background: var(--sfx-primary-soft);
  color: var(--sfx-primary);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--sfx-primary-glow);
}
.forma-pill.disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(1);
}
.cfg-hint {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-2xs, 11px);
  color: #8a5200;   /* ambar de aviso oscurecido a WCAG AA (el --sfx-warning vivo daba 3.98:1) */
  font-family: var(--font-mono, monospace);
}
.forma-pill.just-selected,
.qty-options-compact .qty-pill.just-selected,
.effects-compact .fx-chip.just-selected {
  animation: selectPop .22s cubic-bezier(.16,1,.3,1) both;
}
@keyframes selectPop {
  0%   { transform: scale(0.92); }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1);    }
}

/* ══ SIZE INPUTS ══ */
.size-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.size-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.size-input-group input {
  width: 70px;
  padding: 8px 10px;
  border: 1px solid var(--border2, rgba(0,0,0,0.12));
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
  background: var(--bg, #fff);
  color: var(--ink, #000);
  text-align: center;
}

.size-unit { font-size: var(--fs-xs); font-weight: 600; color: var(--ink3); }
.size-x { font-size: var(--fs-sm); color: var(--ink4); font-weight: 300; }

/* ══ QTY CUSTOM ══ */

.price-badge-green { font-size: var(--fs-2xs); color: var(--cyan-strong, #008f7a); margin-top: 6px; font-family: var(--font-mono, monospace); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.price-badge-orange { font-size: var(--fs-2xs); color: var(--orange-text, #c83000); margin-top: 6px; font-family: var(--font-mono, monospace); letter-spacing: 0.5px; } /* texto pequeno: tono naranja accesible (WCAG AA) */

/* ══ CONFIG HELPERS ══ */

.cfg-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--ink2);
}

.cfg-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--fs-xs);
  color: var(--ink4);
  margin-top: 12px;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 960px) {
  .editor-layout {
    grid-template-columns: 1fr 320px;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .editor-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Canvas: full width, constrained height */
  .editor-canvas-area {
    position: sticky;
    top: 56px;
    z-index: 50;
    background: var(--bg, #fff);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    transition: padding 0.2s;
  }

  /* Mini preview when scrolled */
  .editor-canvas-area.mini {
    padding: 4px 0;
  }

  .editor-canvas-area.mini .editor-canvas-container {
    max-height: 180px;
    border-radius: 8px;
  }

  /* 🔴 La misma sujeción, para lo que SE VE de verdad.
   *
   * Las dos reglas de arriba acotan `.editor-canvas-container`, que es el
   * lienzo del modo EDITAR. La página abre en modo VISTA PREVIA, donde lo que
   * ocupa la pantalla es `.editor-preview-3d` — y ese no tenía tope ninguno.
   *
   * Consecuencia medida a 768x900: la vista previa ocupaba **824 px de los
   * 900** y la zona va `position: sticky` con `z-index: 50`, así que el panel
   * de opciones se deslizaba POR DETRÁS. No había ninguna posición de scroll
   * desde la que se pudiera pulsar el selector de producto: en una tableta en
   * vertical, el configurador no se podía usar.
   *
   * No se veía a 375 px porque la vista previa es cuadrada: a 375 de ancho mide
   * 375 de alto y deja sitio. El problema aparece según se ensancha, justo
   * hasta el salto a dos columnas en 768. */
  /* Solo por ALTO de pantalla, no por ancho. Con un tope en `vw` también se
   * encogía la vista previa en un móvil de 375, donde no había ningún problema
   * —ahí es cuadrada y cabe— y eso es empeorar el caso común para arreglar el
   * raro. En 812 px de alto, 50vh son 406 y la vista previa mide ~370: no la
   * toca. En 900 la baja de ~750 a 450, que es justo lo que hacía falta. */
  .editor-preview-3d {
    max-height: 50vh;
  }

  .editor-canvas-area.mini .editor-preview-3d {
    /* `min(...)`, no `180px` a secas. Con el valor fijo, en horizontal corto
     * (700x320) el estado normal daba 160 px y el «mini» 180: encoger ocupaba
     * MÁS pantalla, justo donde menos altura hay. El mini nunca puede ser más
     * alto que el estado del que viene. */
    max-height: min(180px, 50vh);
  }

  
  .editor-canvas-area.mini .canvas-dimensions {
    display: none;
  }

  .editor-canvas-container {
    max-height: 65vw;
    border-radius: 10px;
    margin: 0 8px;
  }

  .preview-comparison {
    width: calc(100% - 16px);
    gap: 6px;
  }

  .preview-card {
    padding: 8px;
  }

  .product-mockup-stage,
  .preview-sticker-stage {
    min-height: clamp(150px, 42vw, 230px);
  }

  .preview-card > p,
  .preview-sticker-stage .dim-width,
  .preview-sticker-stage .dim-height {
    display: none;
  }

  .quote-mode-options {
    grid-template-columns: 1fr;
  }

  .quote-mode-options span {
    min-height: 42px;
  }

  /* Config panel */
  .editor-config {
    padding: 0 16px 100px;
  }

  /* Material pills: horizontal scroll */
  .material-options {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }

  .mat-option {
    flex-shrink: 0;
  }

  /* Qty: horizontal scroll */

  .qty-option {
    flex-shrink: 0;
    min-width: 110px;
  }

  /* Forma pills: scroll on small screens */
  .forma-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .forma-pill {
    flex-shrink: 0;
    font-size: var(--fs-2xs);
    padding: 6px 12px;
  }

  /* Effects: single column */

  /* Sticky price bar at bottom */
  .mobile-price-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg, #fff);
    border-top: 1px solid var(--border);
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    /* Oculta hasta que el selector de producto deja de estar debajo de ella
     * (la clase la pone `revisarBarraMovil` en editor.js). Ver el porqué largo
     * ahí: al cargar, esta barra tapaba el primer control del configurador. */
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
  }

  .mobile-price-bar.is-visible {
    transform: none;
  }

  .mobile-price-bar .mpb-price {
    font-family: var(--sfx-font-mono, 'JetBrains Mono', monospace);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }

  .mobile-price-bar .mpb-price.flash {
    animation: priceFlash .55s cubic-bezier(.16,1,.3,1);
  }

  .mobile-price-bar .mpb-unit {
    font-size: var(--fs-2xs);
    font-family: var(--font-mono, monospace);
    color: var(--ink4);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }

  .mobile-price-bar .mpb-cta {
    /* mpb-cta hereda .btn-cta-lg pero NO debe heredar el display:none de abajo
       (la regla .btn-cta-lg oculta el botón desktop, esta lo recupera dentro de la price bar).
       Color naranja de marca (CTA primario), override del black por defecto de .btn-cta-lg. */
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: var(--fs-sm);
    font-weight: 700;
    border-radius: var(--r-pill, 100px);
    white-space: nowrap;
    background: var(--orange-hot, #ff3c00);
    color: var(--ink, #0a0a0a);
  }

  /* Hide desktop price box on mobile (shown in sticky bar) */

  /* Oculta el CTA grande del editor desktop en mobile.
     Importante: NO afecta a .mobile-price-bar .mpb-cta (más específico arriba). */
  .btn-cta-lg:not(.mpb-cta) {
    display: none;
  }

  .cfg-trust {
    font-size: var(--fs-2xs);
    gap: 10px;
  }

  /* Size inputs: tighter */
  .size-input-group input {
    width: 60px;
    padding: 7px 8px;
    font-size: var(--fs-sm);
  }
}

/* Explicación del acabado bajo la fila de chips. Alto reservado para que la
   fila de abajo no dé un salto cada vez que el cliente pasa el ratón. */
.cfg-fx-explicacion {
  margin: 6px 0 0;
  min-height: 2.4em;
  font-size: var(--fs-2xs);
  line-height: 1.35;
  color: var(--sfx-text-muted, rgba(0,0,0,0.62));
}

.cfg-fx-explicacion[hidden] {
  display: block;
  visibility: hidden;
}

/* Mobile price bar: hidden on desktop, shown on mobile via media query above */
@media (min-width: 769px) {
  .mobile-price-bar { display: none !important; }

  /* ── Precio y CTA siempre a la vista en escritorio ────────────────────────
   *
   * El problema: en un portátil de 1280x720 el panel de opciones mide ~1155 px,
   * así que la caja de precio nacía en el píxel 896 y el botón "Añadir a la
   * solicitud" en el 1169 — 449 px POR DEBAJO del borde inferior. El cliente
   * configuraba a ciegas y no veía que hubiera un botón. En móvil sí había
   * barra fija; el escritorio estaba peor que el móvil.
   *
   * Por qué no basta con poner `position: sticky` a la caja de precio (se
   * intentó y quedó inerte): `sticky` necesita un ancestro que se DESPLACE.
   * Si se le da `overflow-y: auto` al panel pero el panel crece con su
   * contenido, ese ancestro nunca tiene recorrido y `sticky` no mueve el
   * elemento ni un píxel. Medido: la caja seguía naciendo en el 896, el mismo
   * número que antes del arreglo.
   *
   * La solución es acotar la altura del panel a lo que cabe en pantalla. Con
   * una altura tope real, `overflow-y: auto` sí crea recorrido, y entonces la
   * caja de precio se pega de verdad al fondo del panel.
   *
   * `--cfg-anclaje` = alto de la cabecera fija (64 px) + aire. La cabecera es
   * `position: fixed`, así que el panel tiene que empezar por debajo de ella.
   */
  .editor-config {
    --cfg-anclaje: 84px;
    position: sticky;
    top: var(--cfg-anclaje);
    max-height: calc(100vh - var(--cfg-anclaje) - 16px);
    overflow-y: auto;
    /* Sin esto el contenido pasa por debajo de la caja de precio pegada */
    scrollbar-gutter: stable;
  }

  .cfg-price-cta {
    position: sticky;
    bottom: 0;
    z-index: 10;
    /* Fondo opaco: al quedar pegada, el resto del panel se desliza por detrás */
    background: var(--bg, #fff);
    padding-bottom: 10px;
  }
}

/* ══ DARK MODE ══ */

@media (prefers-reduced-motion: reduce) {
  .canvas-effects.fx-spotuv { animation: none; }
  .price-amount.flash,
  .mobile-price-bar .mpb-price.flash { animation: none; }
  .forma-pill.just-selected,
  .qty-options-compact .qty-pill.just-selected,
  .effects-compact .fx-chip.just-selected { animation: none; }
  .handle-corner,
  .handle-rotate,
  .forma-pill,
  .qty-options-compact .qty-pill,
  .effects-compact .fx-chip,
  .upload-dropzone-center,
  .mat-option,
  .mode-btn,
  .canvas-toolbar button,
  .btn-cta-editor { transition: none; }
}

/* Navegación comercial compartida con el catálogo. */
.nav-end .nav-burger {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.nav-quote {
  position: relative;
}

.nav-quote-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 99px;
  color: var(--bg);
  background: var(--color-brand);
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.store-search-panel {
  position: fixed;
  z-index: 190;
  top: 112px;
  left: 50%;
  width: min(720px, calc(100% - 32px));
  padding: 16px;
  border: 1px solid var(--border2);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

.store-search-panel[hidden],
.store-drawer[hidden] {
  display: none;
}

.store-search-panel label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink3);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.store-search-panel input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--ink);
  background: var(--bg);
  font: inherit;
}

.store-search-panel > span {
  display: block;
  margin-top: 8px;
  color: var(--ink4);
  font-size: var(--fs-xs);
}

.store-drawer {
  position: fixed;
  z-index: 240;
  inset: 0 0 0 auto;
  width: min(420px, 92vw);
  padding: 24px;
  border-left: 1px solid var(--border2);
  background: var(--bg);
  box-shadow: var(--shadow-lg);
}

.store-drawer-head {
  display: flex;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
}

.store-drawer-head h2 {
  margin: 0;
  font-size: clamp(1.7rem, 5vw, 2.8rem);
  text-transform: uppercase;
}

.store-drawer-head button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border2);
  border-radius: 99px;
  color: var(--ink);
  background: var(--bg);
  cursor: pointer;
  font-size: 24px;
}

.store-drawer nav {
  display: grid;
  margin-top: 18px;
}

.store-drawer nav a {
  display: flex;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 750;
  text-decoration: none;
}

.store-drawer-open {
  overflow: hidden;
}

@media (max-width: 700px) {
  .store-search-panel {
    top: 92px;
  }
}