:root{
  --ami-page-w-in: 8.5;
  --ami-page-h-in: 11;
  --ami-dpi: 150;
  --ami-gap: 12px;
  --ami-line: rgba(0,0,0,.15);
  --ami-page-bg:#fff;

  /* selección y menú */
  --ami-focus: #2e4957;
  --ami-tools-bg: rgba(16,16,18,.78);
  --ami-tools-br: rgba(255,255,255,.22);

  /* recorte */
  --ami-crop-accent: #39FF14;            /* verde neón */
  --ami-crop-glow: rgba(57,255,20,.75);  /* glow */
  --ami-btn-ok: #22c55e;                 /* verde aplicar */
  --ami-btn-cancel: #ef4444;             /* rojo cancelar */
}

/* ===== Lienzo / páginas ===== */
#ami-root.container{ width:min(1100px, calc(100% - 24px)); margin:14px auto 28px; }
#ami-root .ami-toolbar{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
#ami-root .workspace{ position:relative; margin-top:12px; }
#ami-root .page-shell{ display:grid; place-items:center; margin:18px 0; }
#ami-root .page-letter{
  position:relative;
  width:min(900px, 100%);
  aspect-ratio: calc(var(--ami-page-w-in) / var(--ami-page-h-in));
  background:var(--ami-page-bg);
  border:1px solid var(--ami-line);
  border-radius:8px;
  box-shadow:0 12px 24px rgba(0,0,0,.20);
  overflow:hidden;
}

/* ===== Ítems ===== */
#ami-root .ami-item{
  position:absolute; left:0; top:0;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  user-select:none; touch-action:none;
  cursor:grab;
  transform-origin:center center;          /* rotación estable */
  background:transparent !important;       /* sin franjas del contenedor */
}
#ami-root .ami-item:active{ cursor:grabbing; }
#ami-root .ami-item[aria-selected="true"]{ outline:2px solid var(--ami-focus); }
#ami-root .ami-item img{
  display:block; width:100%; height:100%;
  border-radius:8px; -webkit-user-drag:none; user-select:none;
  background:transparent !important;
}
/* Modos de ajuste por imagen */
#ami-root .ami-item img.fit-contain{ object-fit: contain; } /* no recorta */
#ami-root .ami-item img.fit-cover  { object-fit: cover;   } /* rellena, recorta */
#ami-root .ami-item img.fit-fill   { object-fit: fill;    } /* estira */

/* ===== Menú lateral / móvil ===== */
#ami-root .ami-tools{
  position:absolute; inset:auto; display:none;
  gap:10px !important; align-items:center;
  background: transparent !important;
  border:0 !important; box-shadow:none !important;
  padding:0 !important; z-index:1000;
}
#ami-root .ami-tools[data-visible="1"]{ display:flex; flex-direction:column; }

/* Burbujas */
#ami-root .ami-tools .tbtn{
  width:40px; height:40px; border-radius:9999px; border:0; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.15) inset;
  transition: transform .12s ease, filter .12s ease;
  backdrop-filter: blur(4px);
}
#ami-root .ami-tools .tbtn i{ font-size:16px; line-height:1; }
#ami-root .ami-tools .tbtn:hover{ transform: translateY(-2px) scale(1.04); filter:brightness(1.03); }
#ami-root .ami-tools .tbtn:active{ transform: scale(.96); }

/* Colores por acción */
#ami-root .ami-tools .tbtn[data-act="crop"]  { background:#16a34a; } /* verde */
#ami-root .ami-tools .tbtn[data-act="rot90"] { background:#2563eb; } /* azul  */
#ami-root .ami-tools .tbtn[data-act="fit"]   { background:#0ea5e9; } /* celeste */
#ami-root .ami-tools .tbtn[data-act="front"] { background:#a855f7; } /* morado*/
#ami-root .ami-tools .tbtn[data-act="back"]  { background:#64748b; } /* gris  */
#ami-root .ami-tools .tbtn[data-act="dup"]   { background:#06b6d4; } /* cyan  */
#ami-root .ami-tools .tbtn[data-act="del"]   { background:#ef4444; } /* rojo  */

@media (max-width:640px){
  #ami-root .ami-tools{ flex-direction:column !important; }
  #ami-root .ami-tools .tbtn{ width:44px; height:44px; }
  #ami-root .ami-tools .tbtn i{ font-size:18px; }
}

/* Ocultar handles antiguos */
#ami-root .ami-item .handle{ display:none !important; }

/* ===== Recorte ===== */
#ami-root .ami-item[data-cropping="1"]{ outline:2px dashed var(--ami-focus); }
#ami-root .ami-item[data-cropping="1"] .ami-crop{ display:block !important; z-index:110 !important; }
#ami-root .ami-crop{ position:absolute; inset:0; z-index:110; pointer-events:none; }

/* Box con borde 1px y glow; oscurecido exterior */
#ami-root .ami-crop .crop-box{
  position:absolute; box-sizing:border-box; pointer-events:auto;
  left:0; top:0; right:0; bottom:0;
  border:1px dashed var(--ami-crop-accent) !important;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.65) !important,
    0 0 0 1px var(--ami-crop-accent),
    0 0 10px var(--ami-crop-glow),
    0 0 20px var(--ami-crop-glow);
}

/* Barras 3px + esquinas */
#ami-root .ami-crop .edge{
  position:absolute; background:var(--ami-crop-accent) !important; opacity:.98; pointer-events:auto;
  box-shadow:0 0 10px var(--ami-crop-glow), 0 0 20px var(--ami-crop-glow);
}
#ami-root .ami-crop .edge.top{    left:0; right:0; top:0;    height:3px; cursor:ns-resize; }
#ami-root .ami-crop .edge.bottom{ left:0; right:0; bottom:0; height:3px; cursor:ns-resize; }
#ami-root .ami-crop .edge.left{   top:0; bottom:0; left:0;   width:3px;  cursor:ew-resize; }
#ami-root .ami-crop .edge.right{  top:0; bottom:0; right:0;  width:3px;  cursor:ew-resize; }

#ami-root .ami-crop .corner{
  position:absolute; width:12px; height:12px; transform:translate(-50%,-50%); pointer-events:auto;
  background:var(--ami-crop-accent) !important;
  box-shadow:0 0 10px var(--ami-crop-glow), 0 0 20px var(--ami-crop-glow);
}
#ami-root .ami-crop .corner.nw{ left:0;   top:0;    cursor:nwse-resize; }
#ami-root .ami-crop .corner.ne{ left:100%;top:0;   cursor:nesw-resize; }
#ami-root .ami-crop .corner.se{ left:100%;top:100%;cursor:nwse-resize; }
#ami-root .ami-crop .corner.sw{ left:0;   top:100%; cursor:nesw-resize; }

/* Acciones: adentro (por defecto) */
#ami-root .ami-crop .crop-actions{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:8px; pointer-events:auto; z-index:120;
}
#ami-root .ami-crop .crop-actions .tbtn{
  width:auto; height:30px; padding:0 12px; border-radius:10px;
  border:none; color:#fff; font-weight:600;
}
#ami-root .ami-crop .crop-actions .tbtn[data-ok]{     background:var(--ami-btn-ok); }
#ami-root .ami-crop .crop-actions .tbtn[data-cancel]{ background:var(--ami-btn-cancel); }

/* Acciones: fuera (móvil) */
#ami-root .ami-crop .crop-actions.outside{
  left:auto; bottom:auto; transform:none; display:flex; flex-direction:column; gap:8px;
}
#ami-root .ami-crop .crop-actions.right{ /* top/left los pone el JS */ }
#ami-root .ami-crop .crop-actions.left{  /* top/left los pone el JS */ }

@media (max-width:640px){
  #ami-root .ami-crop .crop-actions .tbtn{ height:28px; padding:0 10px; border-radius:9px; }
}

/* ===== Redimensionar (puntos en esquinas) ===== */
#ami-root .ami-item .rsz-handle{ display:none; }
#ami-root .ami-item[aria-selected="true"]:not([data-cropping="1"]) .rsz-handle{
  display:block; position:absolute; width:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid var(--ami-focus);
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  z-index:1200;
}
#ami-root .ami-item .rsz-handle.nw{ left:-8px;  top:-8px;  cursor:nwse-resize; }
#ami-root .ami-item .rsz-handle.ne{ right:-8px; top:-8px;  cursor:nesw-resize; }
#ami-root .ami-item .rsz-handle.se{ right:-8px; bottom:-8px;cursor:nwse-resize; }
#ami-root .ami-item .rsz-handle.sw{ left:-8px;  bottom:-8px;cursor:nesw-resize; }





/* ==== Móvil: botones de recorte por fuera (Aplicar / Cancelar) ==== */
@media (max-width:640px){
  #ami-root .crop-actions{ position:absolute; z-index:35; }
  #ami-root .crop-actions.outside{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  #ami-root .crop-actions .tbtn,
  #ami-root .crop-actions .btn{
    width:44px;height:44px;border-radius:9999px;
    display:grid;place-items:center;padding:0;
    box-shadow:0 6px 18px rgba(0,0,0,.22);
  }
  #ami-root .crop-actions .label{ display:none; }
  #ami-root .crop-actions i{ font-size:18px; line-height:1; }
}


/* ==== Móvil: botones de recorte por fuera (Aplicar / Cancelar) ==== */
@media (max-width:640px){
  #ami-root .crop-actions{ position:absolute; z-index:35; }
  #ami-root .crop-actions.outside{
    display:flex;
    flex-direction:column;   /* vertical como la barra */
    gap:10px;
  }
  /* Botones compactos solo icono */
  #ami-root .crop-actions .tbtn,
  #ami-root .crop-actions .btn{
    width:44px;height:44px;border-radius:9999px;
    display:grid;place-items:center;padding:0;
    box-shadow:0 6px 18px rgba(0,0,0,.22);
  }
  #ami-root .crop-actions .label{ display:none; }
  #ami-root .crop-actions i{ font-size:18px; line-height:1; }
}



.page-letter{
  position: relative;
  width: 21.59cm;   /* Carta */
  height: 27.94cm;  /* Carta */
  box-sizing: border-box;
}
.ami-item{
  position: absolute; /* el script también lo aplica al volar */
  box-sizing: border-box;
}


/* Extra (consistencia de cursor) */
#ami-root .ami-item { cursor: grab; }
#ami-root .ami-item:active { cursor: grabbing; }