/* ==========================================================================
   LabelLove - Canvas & Interactive Work Area Styles
   ========================================================================== */

.workspace-area {
  position: absolute;
  top: var(--header-height);
  left: var(--ribbon-width);
  right: var(--inspector-width);
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-app);
  transition: top var(--transition-fast), bottom var(--transition-normal);
}

.workspace-area.drawer-open {
  bottom: var(--drawer-height);
}

/* Rulers Container */
.ruler-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background-color: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.ruler-horizontal {
  position: absolute;
  top: 0;
  left: 24px;
  right: 0;
  height: 24px;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 10;
  overflow: hidden;
}

.ruler-vertical {
  position: absolute;
  top: 24px;
  left: 0;
  bottom: 0;
  width: 24px;
  background-color: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  z-index: 10;
  overflow: hidden;
}

.ruler-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Cursor guides on rulers */
.ruler-guide-x, .ruler-guide-y {
  position: absolute;
  background-color: var(--accent-primary);
  pointer-events: none;
  z-index: 15;
}
.ruler-guide-x {
  top: 0;
  height: 24px;
  width: 1px;
}
.ruler-guide-y {
  left: 0;
  width: 24px;
  height: 1px;
}

/* Canvas Viewport */
.canvas-viewport {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 0;
  bottom: 0;
  overflow: scroll; /* Inkscape-style persistent scrolling */
  background-color: var(--bg-canvas-viewport);
  background-image: 
    radial-gradient(circle at 1px 1px, var(--canvas-grid-dot) 1px, transparent 0);
  background-size: 24px 24px;
  background-position: -1px -1px;
  user-select: none;
  cursor: default;
  scrollbar-width: thin;
  scrollbar-color: var(--canvas-scrollbar-thumb) var(--canvas-scrollbar-track);
}

/* Inkscape-grade Custom High-Precision Scrollbars */
.canvas-viewport::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.canvas-viewport::-webkit-scrollbar-track {
  background: var(--canvas-scrollbar-track);
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
}
.canvas-viewport::-webkit-scrollbar-thumb {
  background: var(--canvas-scrollbar-thumb);
  border-radius: 6px;
  border: 3px solid var(--canvas-scrollbar-border);
  transition: background 0.15s ease;
}
.canvas-viewport::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}
.canvas-viewport::-webkit-scrollbar-thumb:active {
  background: var(--accent-primary);
}
.canvas-viewport::-webkit-scrollbar-corner {
  background: var(--canvas-scrollbar-track);
}

/* Canvas World - Extended Virtual Artboard Space */
.canvas-world {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(100% + 1400px);
  min-height: calc(100% + 1400px);
  padding: 700px;
  box-sizing: border-box;
  transform-origin: 0 0;
}

.canvas-viewport.panning,
.canvas-viewport.panning * {
  cursor: grab !important;
}
.canvas-viewport.is-panning,
.canvas-viewport.is-panning * {
  cursor: grabbing !important;
}

/* The Label Frame */
.label-stage {
  position: relative;
  box-shadow: var(--label-stage-shadow);
  overflow: visible;
  flex-shrink: 0;
}

/* Canvas Stage Resizer Controls (Ajuste directo de tamaño) */
.stage-resizer {
  position: absolute;
  z-index: 25;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  user-select: none;
}

/* Right Edge Resizer */
.stage-resizer-e {
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
}
.stage-resizer-e:hover::after,
.stage-resizer-e.is-active::after {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 3px;
  width: 4px;
  border-radius: 2px;
  background: var(--accent-primary);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.7);
}

/* Bottom Edge Resizer */
.stage-resizer-s {
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 10px;
  cursor: ns-resize;
}
.stage-resizer-s:hover::after,
.stage-resizer-s.is-active::after {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  top: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent-primary);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.7);
}

/* Corner Resizer (Bottom-Right) */
.stage-resizer-se {
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  background: var(--bg-surface);
  border: 1.5px solid var(--accent-primary);
  border-radius: 4px;
  cursor: nwse-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease, background 0.15s ease;
}
.stage-resizer-se:hover,
.stage-resizer-se.is-active {
  background: var(--accent-primary);
  color: #ffffff;
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.8);
}

/* Live Dimension Tooltip */
.stage-resizer-tooltip {
  position: absolute;
  bottom: -32px;
  right: -10px;
  background: rgba(15, 23, 42, 0.95);
  color: var(--accent-cyan);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 30;
}
.stage-resizer-tooltip.is-visible {
  display: block;
}

/* Substrate Textures */
.substrate-thermal {
  background: #ffffff;
  color: #000000;
  /* subtle thermal paper grain */
  background-image: radial-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 0);
  background-size: 4px 4px;
}

.substrate-gloss {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  color: #000000;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.8),
    inset 0 0 40px rgba(255, 255, 255, 0.8);
}

.substrate-kraft {
  background-color: #d6b28d;
  color: #2b1810;
  background-image: 
    radial-gradient(#c49f7a 0.75px, transparent 0.75px),
    radial-gradient(#b8936e 0.75px, #d6b28d 0.75px);
  background-size: 15px 15px;
  background-position: 0 0, 7.5px 7.5px;
}

.substrate-clear {
  background-color: #ffffff;
  background-image: 
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%), 
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%), 
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  color: #000000;
}

/* Printable Safety Margins Boundary */
.safety-margin {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 1px dashed rgba(239, 68, 68, 0.45);
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}

.safety-margin-label {
  position: absolute;
  bottom: 2px;
  right: 6px;
  font-size: 8px;
  font-family: var(--font-mono);
  color: rgba(239, 68, 68, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Canvas Elements Container */
.label-elements-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* Individual Canvas Element */
.canvas-el {
  position: absolute;
  user-select: none;
  cursor: move;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  transform-origin: 0 0;
}

.canvas-el.is-selected {
  outline: 1.5px solid var(--accent-primary);
  outline-offset: 1px;
}

/* Text Element */
.el-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.25;
  color: inherit;
}

.el-text.is-variable {
  border-bottom: 2px solid var(--accent-cyan);
}

.variable-badge-inline {
  display: inline-block;
  background: rgba(6, 182, 212, 0.15);
  color: #0891b2;
  border-radius: 3px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 600;
  border: 1px dashed rgba(6, 182, 212, 0.5);
}

/* Barcode Element */
.el-barcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

.el-barcode canvas, .el-barcode svg,
.el-qr canvas, .el-qr svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* QR Code Element */
.el-qr {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Line / Shape Element */
.el-shape {
  border: 1px solid currentColor;
}
.el-shape.shape-rect {
  border-radius: 4px;
}
.el-shape.shape-circle {
  border-radius: 50%;
}
.el-shape.shape-line {
  border: none;
  border-top: 2px solid currentColor;
  height: 2px !important;
}

/* Image Element */
.el-image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.el-image img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Selection Transformer & Handles */
.transformer-box {
  position: absolute;
  pointer-events: none;
  border: 1.5px solid var(--accent-primary);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
  z-index: 100;
}

.handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border: 1.5px solid var(--accent-primary);
  border-radius: 2px;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.handle.nw { top: -4px; left: -4px; cursor: nwse-resize; }
.handle.n  { top: -4px; left: 50%; margin-left: -4px; cursor: ns-resize; }
.handle.ne { top: -4px; right: -4px; cursor: nesw-resize; }
.handle.e  { top: 50%; right: -4px; margin-top: -4px; cursor: ew-resize; }
.handle.se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.handle.s  { bottom: -4px; left: 50%; margin-left: -4px; cursor: ns-resize; }
.handle.sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.handle.w  { top: 50%; left: -4px; margin-top: -4px; cursor: ew-resize; }

.handle.rotator {
  top: -24px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--accent-primary);
  border: 1.5px solid #ffffff;
  cursor: grab;
}

.rotator-line {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 1px;
  height: 14px;
  background-color: var(--accent-primary);
  pointer-events: none;
}

/* Dimension Tooltip on element */
.dimension-pill {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* Magnetic Alignment Guides */
.magnetic-guide-x, .magnetic-guide-y {
  position: absolute;
  background-color: #ec4899; /* Hot pink alignment guide */
  pointer-events: none;
  z-index: 110;
}
.magnetic-guide-x {
  top: 0;
  bottom: 0;
  width: 1px;
}
.magnetic-guide-y {
  left: 0;
  right: 0;
  height: 1px;
}

/* Floating HUD (Contextual mini-toolbar over selected element) */
.floating-hud {
  position: absolute;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--bg-glass-elevated);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 15px rgba(99, 102, 241, 0.2);
  transform: translateY(-100%);
  margin-top: -12px;
  animation: hudAppear 180ms var(--ease-smooth);
}

@keyframes hudAppear {
  from {
    opacity: 0;
    transform: translateY(-80%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(-100%) scale(1);
  }
}

.hud-btn {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.hud-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}
.hud-btn.active {
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
  font-weight: 600;
}
.hud-divider {
  width: 1px;
  height: 16px;
  background: var(--border-subtle);
  margin: 0 2px;
}

.hud-select {
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  cursor: pointer;
}

/* Multi-Label Sheet View (Avery / A4 Mode) */
.sheet-stage-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.sheet-page {
  background: #ffffff;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.2);
  display: grid;
  position: relative;
  box-sizing: border-box;
}

.sheet-cell {
  border: 1px dashed #cbd5e1;
  position: relative;
  cursor: pointer;
  transition: all 0.15s;
  overflow: hidden;
}

.sheet-cell:hover {
  border-color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.04);
}

.sheet-cell.is-skipped {
  background: #f1f5f9;
  opacity: 0.45;
}
.sheet-cell.is-skipped::after {
  content: 'SALTADO';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1px;
}

.sheet-cell.is-start-cell {
  outline: 2px solid var(--accent-success);
  outline-offset: -2px;
}
.sheet-cell.is-start-cell::before {
  content: 'INICIO AQUÍ';
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 8px;
  font-weight: 700;
  color: var(--accent-success);
  z-index: 10;
}