/* ====== CrearPDF.com — editor-fusionado.css ======
   Contiene: editor-tools.css + imagenes.css (orden preservado)
   Nota: reglas duplicadas se conservan; las últimas ganan. */

/* ============== editor-tools.css (v3) ============== */

#editorOverlayRoot{
  position: fixed; inset: 0;
  pointer-events: none; z-index: 6000;
}

/* Caja de selección */
.et-selection{
  position: absolute;
  border: 2px solid rgba(14,165,233,.9);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(14,165,233,.25) inset;
  pointer-events: none;
}

/* Toolbar flotante */
.et-toolbar{
  position: absolute; pointer-events: auto;
  display: inline-flex; flex-direction:column; align-items: center; gap: 7px;
  background: #fff; border-radius: 999px; padding: 8px 7px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);
}
.et-btn{
  width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(0,0,0,.08); color: #334155;
  transition: transform .12s ease;
}
.et-btn:hover{ transform: translateY(-1px); }
.et-btn.danger{ color: #dc2626; border-color: rgba(220,38,38,.25); }
.et-btn[data-title]{ position: relative; }
.et-btn[data-title]::after{
  content: attr(data-title);
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(30,33,38,.94); color: #fff; font-size: 11px; padding: 4px 7px; border-radius: 5px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: .15s;
}
.et-toolbar.is-right .et-btn[data-title]::after,
.et-toolbar.is-overlay .et-btn[data-title]::after{ right:calc(100% + 8px); }
.et-toolbar.is-left .et-btn[data-title]::after{ left:calc(100% + 8px); }
.et-btn:hover::after{ opacity: 1; }

/* Mango de rotación */
.et-rotate{
  position: absolute; pointer-events: auto;
  width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #0ea5e9; background: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.2);
  cursor: grab;
}
.et-rotate:active{ cursor: grabbing; }

/* Cursor global mientras rotamos */
html.et-rotating, body.et-rotating{
  cursor: grabbing !important;
}

/* Asas de resize */
.et-handle{
  position: absolute; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 999px;
  background: #fff; border: 2px solid #0ea5e9;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.et-handle.et-tl{ cursor: nwse-resize; }
.et-handle.et-tr{ cursor: nesw-resize; }
.et-handle.et-bl{ cursor: nesw-resize; }
.et-handle.et-br{ cursor: nwse-resize; }
.et-handle.et-tm, .et-handle.et-bm { cursor: ns-resize; }
.et-handle.et-ml, .et-handle.et-mr { cursor: ew-resize; }

.et-btn.is-hidden{ display:none; }

/* Botón "Aplicar recorte" en verde */
.et-btn.primary{
  background: #16a34a;        /* verde */
  color: #fff;
  border-color: #16a34a;
}
.et-btn.primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.et-btn.primary:active{
  filter: brightness(0.96);
  transform: translateY(0);
}

/* (opcional) estado deshabilitado si alguna vez lo usas */
.et-btn.primary[disabled]{
  opacity: .6;
  pointer-events: none;
}


/* --- separador --- */

/* ===================== CrearPDF.com – imagenes.css (v3.1) ===================== */
/* Variables de tema */
:root{
  --sheet-bg: #fff;
  --sheet-radius: 16px;
  --sheet-shadow: 0 16px 48px rgba(0,0,0,.12);
  --viewport-pad: 16px; /* aire alrededor de la hoja */
}

/* Tarjeta (si la usas en otras vistas) */
.sheet-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.08);
  padding:0;
  overflow:hidden;
}

/* ==================== VIEWPORT & ZOOM (centrado + aire) ==================== */
.paper-viewport{
  width:100%;
  height:100dvh;
  min-height:240px;
  max-height:100dvh;
  padding:var(--viewport-pad);
  box-sizing:border-box;
  display:flex;
  justify-content:safe center;
  align-items:safe center;
  background:#eef3f7;
  overflow:auto;
  overflow-anchor:none;
  scroll-behavior:auto;
  touch-action:none;
  -webkit-overflow-scrolling:touch;
}

.paper-zoom-frame{position:relative;flex:0 0 auto;min-width:1px;min-height:1px}
.paper-zoom-frame .paper-zoom{max-width:none}
.paper-zoom{
  display:flex;
  flex-direction:column;   /* hoja(s) arriba, controles debajo */
  align-items:center;      /* centrado en X */
  gap:16px;
  max-width:100%;
  transform:scale(var(--collage-zoom,1));
  transform-origin:top left;
  will-change:transform;
}
.paper-viewport.is-pinching,.paper-viewport.is-panning{overscroll-behavior:none}.paper-zoom{transition:none}.paper-viewport.is-panning{cursor:grabbing}

.collage-zoom-bar{position:fixed;left:0;right:0;bottom:0;z-index:5900;display:flex;align-items:center;justify-content:flex-end;min-height:32px;padding:2px max(10px,env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));border-top:1px solid #d7dee8;background:rgba(255,255,255,.96);box-shadow:0 -2px 10px rgba(15,23,42,.08);backdrop-filter:blur(10px)}
.collage-zoom-controls{display:flex;align-items:center;gap:5px;height:28px;color:#40506c}
.collage-zoom-controls button{display:grid;place-items:center;min-width:26px;height:26px;padding:0;border:0;border-radius:5px;background:transparent;color:inherit;cursor:pointer}
.collage-zoom-controls button:hover{background:#edf2f8}.collage-zoom-controls button:active{background:#dfe8f3}
.collage-zoom-controls button i{font-size:10px}
.collage-zoom-controls input[type="range"]{width:124px;height:18px;margin:0;accent-color:#315fc4;cursor:pointer}
.collage-zoom-controls .collage-zoom-percent{min-width:48px;padding:0 5px;font-size:11px;font-weight:750;font-variant-numeric:tabular-nums}
html[data-theme="dark"] .collage-zoom-bar{border-color:#555d69;background:rgba(42,46,52,.96);box-shadow:0 -2px 10px rgba(0,0,0,.3)}
html[data-theme="dark"] .collage-zoom-controls{color:#e5e9ef}
html[data-theme="dark"] .collage-zoom-controls button:hover{background:#505761}
@media(max-width:650px){.collage-zoom-bar{min-height:36px}.collage-zoom-controls{height:32px}.collage-zoom-controls button{min-width:30px;height:30px}.collage-zoom-controls input[type="range"]{width:min(34vw,128px)}}

/* ==================== HOJA ==================== */
.paper{
  position:relative;
  background:var(--sheet-bg);
  border-radius:0;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  border:1px solid rgba(0,0,0,.06);
  transform-origin:top center;
}

/* Tamaño Carta real @96dpi (desktop/base) */
.paper-letter{
  width:816px;    /* 8.5in * 96dpi */
  height:1056px;  /* 11in  * 96dpi */
}

/* Márgenes internos de la hoja */
.paper-margins{
  position:absolute;
  inset:0;
  padding:0;
  box-sizing:border-box;
}

/* Zona de trabajo donde van las imágenes */
.paper-stage{
  position:relative;
  width:100%;
  height:100%;
  background:#fff;
  border-radius:0;
  overflow:hidden;
}

.paper-stage .canvas-container{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  z-index:1;
}
.paper-stage .canvas-container canvas{
  width:100% !important;
  height:100% !important;
}
.collage-canvas{ width:100%; height:100%; display:block; }

/* Placeholder inicial */
.stage-placeholder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  transform:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.55rem;
  padding:24px;
  box-sizing:border-box;
  border:0;
  border-radius:0;
  background:transparent;
  color:#6b7b86;
  text-align:center;
  cursor:pointer;
  pointer-events:auto;
  z-index:3;
  transition:background .16s ease;
}
.paper-stage.has-content .stage-placeholder{ display:none; }

.fabric-collage-tools{
  position:fixed;
  z-index:6100;
  display:none;
  flex-direction:column;
  gap:7px;
  padding:7px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 30px rgba(15,23,42,.22);
  backdrop-filter:blur(8px);
}
.fabric-collage-tools.is-visible{ display:flex; }
.fabric-collage-tools button{
  width:36px;height:36px;padding:0;border:1px solid #dbe4ea;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:#334155;font-size:15px;
}
.fabric-collage-tools button:active{ transform:scale(.94); }
.fabric-collage-tools button:disabled{ opacity:.55;cursor:wait; }
.fabric-collage-tools button.is-active{border-color:#2f6fd0;background:#e8f1ff;color:#245eb8;box-shadow:inset 0 0 0 1px #8cb4ef}
.fabric-collage-tools .fabric-collage-more{position:absolute;right:calc(100% + 8px);top:50%;display:grid;grid-template-columns:repeat(2,36px);gap:6px;padding:7px;transform:translateY(-50%);border:1px solid #dbe4ea;border-radius:14px;background:rgba(255,255,255,.98);box-shadow:0 10px 28px rgba(15,23,42,.2);backdrop-filter:blur(8px)}
.fabric-collage-tools .fabric-collage-more[hidden]{display:none}.fabric-collage-tools.tools-on-left .fabric-collage-more{right:auto;left:calc(100% + 8px)}
.collage-measurement{position:fixed;z-index:6050;display:none;pointer-events:none;border-top:1px solid rgba(37,99,235,.7);border-left:1px solid rgba(37,99,235,.7);color:#245eb8;font-size:10px;font-weight:850}.collage-measurement.is-visible{display:block}.collage-measurement::before,.collage-measurement::after{content:"";position:absolute;background:#2563eb}.collage-measurement::before{left:-3px;right:0;top:-3px;height:5px;border-left:1px solid #2563eb;border-right:1px solid #2563eb;background:transparent}.collage-measurement::after{left:-3px;top:-3px;bottom:0;width:5px;border-top:1px solid #2563eb;border-bottom:1px solid #2563eb;background:transparent}.collage-measure-width,.collage-measure-height{position:absolute;padding:2px 5px;border:1px solid #b8cef0;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 2px 6px #17345f1a;white-space:nowrap}.collage-measure-width{left:50%;top:-7px;transform:translate(-50%,-100%)}.collage-measure-height{left:-7px;top:50%;transform:translate(-100%,-50%) rotate(-90deg)}
.layer-direction-icon{ position:relative;display:inline-grid;place-items:center;width:22px;height:22px; }
.layer-direction-icon .fa-layer-group{ font-size:15px; }
.layer-direction-icon .fa-arrow-up,
.layer-direction-icon .fa-arrow-down{
  position:absolute;right:-3px;font-size:8px;color:#0ea5e9;
  filter:drop-shadow(0 0 1px #fff);
}
.layer-direction-icon .fa-arrow-up{ top:-3px; }
.layer-direction-icon .fa-arrow-down{ bottom:-3px; }
.fabric-collage-tools button[data-action="delete"]{ color:#dc2626; }
.fabric-collage-tools button[data-action="crop-apply"]{ background:#16a34a;color:#fff;border-color:#16a34a; }
.fabric-collage-tools button[data-action="crop-cancel"]{ background:#ef4444;color:#fff;border-color:#ef4444; }
.fabric-collage-tools .crop-only{ display:none; }
.fabric-collage-tools.is-cropping button:not(.crop-only){ display:none; }
.fabric-collage-tools.is-cropping .crop-only{ display:grid; }
[data-theme="dark"] .fabric-collage-tools{ background:rgba(25,32,43,.96);border-color:#465366; }
[data-theme="dark"] .fabric-collage-tools button{ background:#202b3a;color:#e5edf7;border-color:#465366; }
[data-theme="dark"] .fabric-collage-tools button.is-active{background:#294b79;color:#e6f0ff;border-color:#72a5e8}[data-theme="dark"] .fabric-collage-more{background:rgba(25,32,43,.98);border-color:#465366}[data-theme="dark"] .collage-measure-width,[data-theme="dark"] .collage-measure-height{background:#202b3af2;color:#b9d6ff;border-color:#486c9f}
[data-theme="dark"] .layer-direction-icon .fa-arrow-up,
[data-theme="dark"] .layer-direction-icon .fa-arrow-down{ color:#7dd3fc; }
@media(max-width:768px){
  .fabric-collage-tools{ gap:6px;padding:6px; }
  .fabric-collage-tools button{ width:40px;height:40px;font-size:16px; }
  .fabric-collage-tools .fabric-collage-more{grid-template-columns:repeat(2,40px)}
}
.stage-placeholder:hover{ background:rgba(14,165,233,.045); }
.stage-placeholder:active{ background:rgba(14,165,233,.08); }
.stage-placeholder i{ font-size:42px; color:#99a6ae; }
.stage-placeholder strong{ font-size:20px; color:#667680; }
.stage-placeholder span{ font-size:14px; color:#85919a; }

@media (max-width:768px){
  .stage-placeholder{ width:100%; height:100%; min-height:0; padding:18px 14px; }
  .stage-placeholder i{ font-size:36px; }
  .stage-placeholder strong{ font-size:17px; }
  .stage-placeholder span{ font-size:12px; }
}

[data-theme="dark"] .stage-placeholder{
  background:transparent;
}

/* ================== ELEMENTOS / IMÁGENES EN LA HOJA ================== */
.stage-item{
  position: absolute;
  box-sizing: border-box;
  user-select: none;
  touch-action: none;

  transform-origin:center center; /* consistente para rotación */
  /* estilo del marco */
  border-radius: 8px;
  overflow: hidden;               /* recorta lo que sobresalga */
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}


/* Caja para recorte */
.stage-item .img-box{
  width: 100%;
  height: 100%;
  overflow: hidden;               /* imprescindible para “barritas” de crop */
}

/* Imagen interna (ruta nueva) */
.stage-item .img-el{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;            /* cambia a 'cover' si quieres recorte más “real” */
  pointer-events: none;
  user-select: none;
  /* el JS setea estas variables en px para recorte */
  clip-path: inset(var(--cropT,0px) var(--cropR,0px) var(--cropB,0px) var(--cropL,0px));
}

/* COMPAT: si aún hay imágenes directas dentro del contenedor, recórtalas igual */
.stage-item > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;            /* mantiene proporción */
  pointer-events: none;
  user-select: none;
  /* >>> FIX: aplicar recorte también en compat <<< */
  clip-path: inset(var(--cropT,0px) var(--cropR,0px) var(--cropB,0px) var(--cropL,0px));
}

/* Cursores de barritas/handles (coinciden con editor-tools.css) */
.et-handle.et-tm, .et-handle.et-bm { cursor: ns-resize; }  /* arriba/abajo */
.et-handle.et-ml, .et-handle.et-mr { cursor: ew-resize; }  /* izquierda/derecha */
.et-handle.et-tl, .et-handle.et-br { cursor: nwse-resize; }/* diagonales */
.et-handle.et-tr, .et-handle.et-bl { cursor: nesw-resize; }

/* ==================== CONTENEDOR DE PÁGINAS ==================== */
#pages{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
.paper-page .paper{ margin:0 auto; }

/* ==================== CONTROLES (Agregar/Eliminar hoja) ==================== */
.page-controls{
  display:flex; gap:12px; align-items:center; justify-content:center;
  margin-top:16px;
  filter:grayscale(1);
  opacity:.85;
  user-select:none;
}
.page-controls .btn-page{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff; color:#2e4957;
  border-radius:999px; padding:10px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  font-weight:600;
}
.page-controls .btn-page i{ font-size:18px; }
.page-controls .btn-page:hover{ opacity:.95; transform:translateY(-1px); }
.page-controls .remove.is-hidden{ display:none; }

.paper-page.is-active .paper{
  outline: 2px solid rgba(14, 165, 233, .35);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* Botón eliminar dentro de CADA hoja */
.page-delete{
  position:absolute;
  right:10px; bottom:10px; z-index:6;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.1);
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  color:#dc2626;
}
.page-delete i{ font-size:18px; }
.page-delete:active{ transform:translateY(1px); }
@media (max-width:768px){ .page-delete{ width:48px; height:48px; } }

/* ==================== DESKTOP ==================== */
@media (min-width:769px){
  .paper-letter{ width:816px; height:1056px; }
}

/* ==================== MÓVIL ==================== */
@media (max-width:768px){
  .paper-viewport{
    padding-top:calc(8px + env(safe-area-inset-top));
    padding-right:calc(var(--viewport-pad) + env(safe-area-inset-right));
    padding-bottom:calc(var(--viewport-pad) + env(safe-area-inset-bottom));
    padding-left:calc(var(--viewport-pad) + env(safe-area-inset-left));
    justify-content:flex-start;
    align-items:stretch;
  }

  .paper-zoom{
    align-items:center;
    gap:12px;
    max-height:none;
  }

  #pages{ gap:16px; }
  .paper-margins{ padding:0; }

  /* Hoja “tarjeta” visible completa */
  .paper-letter{
    aspect-ratio:8.5 / 11;
    width: min(
      calc(100vw - (var(--viewport-pad) * 2) - env(safe-area-inset-left) - env(safe-area-inset-right)),
      calc( (100dvh - (calc(8px + env(safe-area-inset-top)) + (var(--viewport-pad) + env(safe-area-inset-bottom))) ) * 8.5 / 11 )
    );
    height:auto !important;
    max-height:none;
    margin-inline:auto;
    background:#fff;
    border-radius:0;
    box-shadow:0 12px 28px rgba(0,0,0,.14);
    border:1px solid rgba(0,0,0,.06);
  }
}

/* ====== PATCH MÓVIL extra ====== */
@media (max-width:768px){
  .paper-zoom{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    max-height:none !important;
  }
  #paperZoom > .paper.paper-letter,
  .paper-page .paper.paper-letter{
    display:block;
    background:#fff !important;
    border:1px solid rgba(0,0,0,.06) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.14) !important;
    border-radius:0 !important;
    aspect-ratio:8.5 / 11 !important;
    width: calc(
      100vw - (var(--viewport-pad) * 2)
      - env(safe-area-inset-left) - env(safe-area-inset-right)
    ) !important;
    height:auto !important;
    max-height:none !important;
    margin:0 auto !important;
    transform:none !important;
  }
  .paper-margins{ padding:0; box-sizing:border-box; }
  .paper-stage{ min-height: 100%; }
}

/* ===================== Modal de confirmación ===================== */
.confirm-delete{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, .40);
  backdrop-filter: blur(2px);
  z-index: 9999;
  overscroll-behavior: contain;
}
.confirm-delete.is-hidden{ display: none; }
.cd-card{
  width: min(92vw, 420px);
  max-width: 92vw;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  padding: 16px;
}
html.modal-open, body.modal-open{
  overflow: hidden !important;
  height: 100dvh !important;
}
.cd-card h4{ margin: 0 0 6px; font-size: 18px; color: #0f172a; }
.cd-desc{ margin: 0 0 14px; color: #475569; font-size: 14px; }
.cd-actions{ display: flex; gap: 10px; justify-content: flex-end; }
.cd-btn{
  appearance: none; border: 1px solid rgba(0,0,0,.1);
  background: #fff; color: #334155; font-weight: 600;
  padding: 10px 14px; border-radius: 999px;
}
.cd-btn.cd-danger{ background: #ef4444; color: #fff; border-color: #ef4444; }
.cd-btn:hover{ transform: translateY(-1px); }

/* Cuando hay recorte activo, usa cover para “comerse” los bordes */
.stage-item.is-cropped .img-el,
.stage-item.is-cropped > img{
  object-fit: cover;
}

.stage-item .img-el{ transform: none !important; }


/* === Barritas de recorte (centro de cada lado) === */
/* Mantén las esquinas como círculos (ya existen). Estos 4 se dibujan como barras. */
.et-handle.et-tm,
.et-handle.et-bm,
.et-handle.et-ml,
.et-handle.et-mr{
  border-radius: 3px;          /* rectangulito, no círculo */
  border-width: 2px;
  background: #fff;            /* relleno blanco */
  border-color: #0ea5e9;       /* mismo azul del marco */
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Orientación y tamaño de cada barra (centradas en el punto de anclaje) */
.et-handle.et-tm,
.et-handle.et-bm{
  width: 32px;                 /* largo de la barrita horizontal */
  height: 10px;                 /* grosor */
  cursor: ns-resize;
}
.et-handle.et-ml,
.et-handle.et-mr{
  width: 10px;                  /* grosor */
  height: 32px;                /* largo de la barrita vertical */
  cursor: ew-resize;
}

/* Mejora de pulsabilidad: hitbox invisible un poco más grande */
.et-handle.et-tm::before,
.et-handle.et-bm::before,
.et-handle.et-ml::before,
.et-handle.et-mr::before{
  content:"";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width: 40px; height: 20px;   /* área de toque extra */
}

/* Hover/activa (visual) */
.et-handle.et-tm:hover,
.et-handle.et-bm:hover,
.et-handle.et-ml:hover,
.et-handle.et-mr:hover{
  background: #e0f2fe;
}

/* En móvil, hacerlas un pelín más grandes */
@media (max-width:768px){
  .et-handle.et-tm, .et-handle.et-bm{ width: 36px; height: 8px; }
  .et-handle.et-ml, .et-handle.et-mr{ width: 8px;  height: 36px; }
}

/* Mejor respuesta táctil y menos jank */
.paper-stage,
.et-handle,
.et-rotate {
  touch-action: none; /* evita scroll/zoom mientras redimensionas/rotas */
}

.stage-item{
  will-change: left, top, width, height, transform; /* suaviza animación */
}

/* Overlay oculto por defecto; el JS lo muestra solo cuando hay selección */
#editorOverlayRoot .et-toolbar,
#editorOverlayRoot .et-rotate,
#editorOverlayRoot .et-handle,
#editorOverlayRoot .et-selection{ display:none; }

/* Móvil: evitar gestos del navegador mientras interactúas y reducir jank */
.paper-stage,
.et-handle,
.et-rotate { touch-action: none; }

/* ayuda de rendimiento al mover/redimensionar */
.stage-item{ will-change: left, top, width, height, transform; }

/* evita gestos del navegador durante rotar/resize/drag */
.paper-stage, .et-handle, .et-rotate { touch-action: none; }

/* Ocultar UI en el DOM clonado para exportar */
.exporting .fab,
.exporting .btn-fab,
.exporting .page-add,
.exporting .page-trash,
.exporting .page-controls,
.exporting .page-floating-controls,
.exporting .et-handles,
.exporting .et-selection,
.exporting .et-rotate,
.exporting .crop-bars,
.exporting .guides,
.exporting [data-export-skip]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}