/* ====== 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; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 6px 8px;
  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; bottom: -22px; left: 50%; transform: translateX(-50%);
  background: rgba(2,6,23,.9); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: .15s;
}
.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%;
  min-height:100vh;
  padding:var(--viewport-pad);
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#eef3f7;
  overflow:auto;
}

.paper-zoom{
  display:flex;
  flex-direction:column;   /* hoja(s) arriba, controles debajo */
  align-items:center;      /* centrado en X */
  gap:16px;
  max-width:100%;
}

/* ==================== HOJA ==================== */
.paper{
  position:relative;
  background:var(--sheet-bg);
  border-radius:12px;
  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:36px;
  box-sizing:border-box;
}

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

/* Placeholder inicial */
.stage-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.4rem;
  color:#6b7b86;
  text-align:center;
  pointer-events:none;
}
.stage-placeholder i{ font-size:42px; opacity:.6; }

/* ================== 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; } }

/* Botón "Agregar imágenes" por hoja */
.page-add{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:-22px; z-index:7;
  width:54px; height:54px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#0ea5e9; color:#fff; border:0;
  box-shadow:0 10px 24px rgba(14,165,233,.35), 0 2px 6px rgba(0,0,0,.15);
}
.page-add i{ font-size:20px; }
.page-add:active{ transform:translateX(-50%) translateY(1px); }
.paper-page .page-add{ display:none; }
.paper-page.is-active .page-add{ display:inline-flex; }
@media (max-width:768px){ .page-add{ width:60px; height:60px; bottom:-24px; } }

/* ==================== 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:16px; }

  /* 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:12px;
    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:12px !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:16px; 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; }


/* Botón "Agregar" superior (gemelo del de abajo) */
.page-add-top{
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:-22px; z-index:7;
  width:54px; height:54px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#0ea5e9; color:#fff; border:0;
  box-shadow:0 10px 24px rgba(14,165,233,.35), 0 2px 6px rgba(0,0,0,.15);
}
.page-add-top i{ font-size:20px; }
.page-add-top:active{ transform:translateX(-50%) translateY(1px); }

/* Mismas reglas de visibilidad que el botón inferior */
.paper-page .page-add-top{ display:none; }
.paper-page.is-active .page-add-top{ display:inline-flex; }

/* Tamaño en móvil – igual que el de abajo */
@media (max-width:768px){
  .page-add-top{ width:60px; height:60px; top:-24px; }
}


/* === 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;
}