.im-shell{display:grid;gap:14px}

.im-drop{margin-top:12px;padding:34px 18px;border:2px dashed var(--border);border-radius:16px;background:var(--panel2);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.im-drop:hover,.im-drop.is-over{border-color:var(--cy);background:color-mix(in srgb,var(--cy) 6%,var(--panel2))}
.im-drop-ico{font-size:32px;line-height:1;margin-bottom:8px}
.im-drop-in b{display:block;color:var(--txt);font-size:14px}
.im-drop-in span{display:block;margin-top:5px;color:var(--mut);font-size:11px}

.im-work{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.im-canvas-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px;color:var(--mut);font-size:10.5px}
.im-bgtoggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
/* OJO con el centrado de esta caja.
   Antes usaba align-items:center. Con una foto VERTICAL mas alta que la caja,
   eso deja la parte de arriba fuera y el scroll NO llega hasta ella: se medio
   1.040 px de imagen inalcanzables por arriba. Es un fallo conocido de flex
   con overflow. Se centra con margin:auto en el hijo (ver mas abajo), que si
   respeta el scroll.
   Ademas la caja crece hasta 78vh: con 520 px fijos quedaba medio panel en
   blanco en una pantalla grande y la foto se veia diminuta. */
.im-canvas-box{display:flex;align-items:flex-start;justify-content:center;min-height:320px;
  max-height:min(78vh,900px);padding:12px;border:1px solid var(--border);border-radius:14px;overflow:auto;
  background-color:#fafafa;
  background-image:linear-gradient(45deg,#e4e4e7 25%,transparent 25%),linear-gradient(-45deg,#e4e4e7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e4e7 75%),linear-gradient(-45deg,transparent 75%,#e4e4e7 75%);
  background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.im-canvas-box.is-dark{background-color:#18181b;
  background-image:linear-gradient(45deg,#27272a 25%,transparent 25%),linear-gradient(-45deg,#27272a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#27272a 75%),linear-gradient(-45deg,transparent 75%,#27272a 75%)}
/* margin:auto centra igual que align-items:center PERO sin comerse lo que
   sobresale por arriba, que es justo lo que se perdia con las fotos verticales. */
.im-canvas-box canvas{max-width:100%;height:auto;object-fit:contain;margin:auto}

.im-controls{display:grid;gap:11px}
.im-controls .mrow{margin:0}
.im-controls label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--mut)}
.im-controls output{color:var(--cy);font-weight:800;font-size:11.5px}
.im-controls input[type=range]{width:100%;margin-top:5px}
.im-controls .hint{margin-top:3px;font-size:10px}
/* La casilla y su texto tienen que ir PEGADOS. Como .im-controls label pone
   justify-content:space-between (para los sliders, donde el % va a la derecha),
   aqui hay que anularlo o el texto se va al borde derecho y se sale del marco.
   El texto va en su propio <span> para que sea un elemento flex de verdad y no
   un trozo de texto suelto, que es lo que se desbordaba en movil. */
/* Se escribe como ".im-controls .im-check" y no como ".im-check" a secas por
   una razon concreta: ".im-controls label" tiene MAS especificidad que una
   clase suelta, asi que ganaba en align-items, gap, font-size y color. Habia
   que ir poniendo !important propiedad a propiedad; con dos clases gana
   limpio y de una vez. */
.im-controls .im-check{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;
  gap:8px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);
  cursor:pointer;font-size:11.5px;color:var(--txt);width:100%;max-width:100%;box-sizing:border-box}
.im-controls .im-check input[type=checkbox]{flex:0 0 auto;width:15px;height:15px;margin:1px 0 0}
/* El texto llevaba "flex:1 1 auto" y se quedaba en CERO pixeles de ancho: con
   overflow-wrap:anywhere eso lo partia letra por letra en vertical, y la caja
   crecia hasta 480 px de alto. Con flex-basis 0 y grow 1 se reparte el sitio
   que sobra en vez de encogerse a nada. */
.im-controls .im-check>span{flex:1 1 0%;min-width:0;text-align:left;line-height:1.35;
  overflow-wrap:break-word;word-break:normal;hyphens:none}
.im-bgtoggle>span{min-width:0;overflow-wrap:anywhere}
/* Nada dentro del Estudio puede empujar la pagina a lo ancho */
.im-shell,.im-work,.im-controls,.im-canvas-wrap{min-width:0;max-width:100%}
.im-controls .hint,.im-controls label{overflow-wrap:anywhere}

/* Borrar / Restaurar y el grosor de la brocha */
.im-varita-modo{display:flex;gap:7px}
.im-varita-modo button{flex:1 1 0%;padding:9px 10px;font-size:11.5px;font-weight:800}
.im-varita-modo button.is-on{background:var(--cy)!important;color:#04222a!important;border-color:var(--cy)!important}
/* La imagen y su capa de guia van superpuestas. El envoltorio se ajusta al
   tamano de la imagen para que la guia case pixel a pixel con ella. */
.im-lienzo{position:relative;display:inline-block;line-height:0;margin:auto}
.im-guia{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Con la varita activa se esconde el cursor del sistema: el puntero pasa a
   ser el circulo que se dibuja en la capa de guia, que si tiene el tamano
   exacto de la brocha y sirve para apuntar. */
.im-canvas-box canvas.is-pincel{cursor:none;touch-action:none}
/* Un cian que se lee en los dos temas. El --cy de la marca es precioso sobre
   fondo oscuro, pero sobre el panel claro da 1,81 de contraste y hace falta
   4,5 para que se pueda leer un numero. Se oscurece solo en tema claro. */
:root{--cy-leible:var(--cy)}
[data-theme="light"]{--cy-leible:#0e7490}
.im-brocha output,.im-zoom-val{color:var(--cy-leible);font-weight:800}
/* "Solo comprimir" manda sobre todo el panel, asi que se destaca. El realce
   se hace con el BORDE y el fondo, no con el texto en cian: sobre el panel
   claro ese cian da 1,81 de contraste y hace falta 4,5 para poder leerlo. */
.im-controls .im-solo{border-color:color-mix(in srgb,var(--cy) 40%,var(--border));
  background:color-mix(in srgb,var(--cy) 7%,var(--panel2))}
.im-controls .im-solo b{color:var(--txt)}

/* Recorte inteligente (el modelo que corre en el navegador) */
.im-ia{display:flex;gap:7px;flex-wrap:wrap}
.im-ia button{flex:1 1 auto;padding:11px 12px;font-size:12px;font-weight:800}
#imIA{background:color-mix(in srgb,var(--cy) 14%,var(--panel2));border-color:var(--cy);color:var(--txt)}
#imIA.is-on{background:var(--cy)!important;color:#04222a!important;border-color:var(--cy)!important}
#imIAOff{flex:0 0 auto}
.im-ia-hint{margin-top:5px!important}
.im-ia-estado{margin-top:8px;padding:9px 11px;border:1px dashed var(--border);border-radius:10px;
  font-size:11px;line-height:1.45;color:var(--mut);overflow-wrap:anywhere}
.im-ia-estado.is-ok{border-style:solid;border-color:color-mix(in srgb,var(--ok) 45%,var(--border));color:var(--ok)}
.im-ia-estado.is-err{border-style:solid;border-color:#fb7185;color:#fb7185}
/* Mientras corre, la caja del aviso se convierte en la barra de progreso. */
.im-ia-estado.is-cargando{border-style:solid;border-color:color-mix(in srgb,var(--ok) 40%,var(--border));padding:8px 9px}
.im-barra{position:relative;height:26px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--txt) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 30%,var(--border))}
.im-barra i{position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:linear-gradient(180deg,#4ade80,#16a34a);
  /* La transicion hace que avance suave en vez de a saltos de tramo. */
  transition:width .35s ease-out}
/* El texto va ENCIMA de la barra y en blanco con sombra: asi se lee tanto
   sobre el verde como sobre la parte vacia, en tema claro y en oscuro. */
.im-barra span{position:absolute;inset:0;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(0,0,0,.55)}
@media(max-width:720px){.im-ia button{flex:1 1 100%}}

/* Mover y acercar la imagen */
.im-canvas-box.is-zoom{overflow:hidden;touch-action:none}
.im-canvas-box canvas{transition:transform .06s linear;will-change:transform}
.im-zoom{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.im-zoom .btn-mini{padding:6px 11px;min-width:38px}
/* El color sale de --cy-leible (mas arriba). Aqui NO se vuelve a poner: esta
   regla va despues y pisaba la que arregla el contraste en tema claro. */
.im-zoom-val{min-width:52px;text-align:center;font-size:11px;font-weight:800}
.im-zoom-tip{flex:1 1 100%;margin:0;font-size:10px}
@media(min-width:900px){.im-zoom-tip{flex:1 1 auto}}

.im-sizes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.im-size{padding:9px 11px;border:1px solid var(--border);border-radius:11px;background:var(--panel2);text-align:center}
.im-size span{display:block;color:var(--mut);font-size:9px;text-transform:uppercase;letter-spacing:.4px}
.im-size b{display:block;margin-top:3px;color:var(--txt);font-size:14px}
.im-size small{display:block;margin-top:2px;color:var(--mut);font-size:9px}
.im-size.is-win{border-color:color-mix(in srgb,var(--ok) 45%,var(--border))}
.im-size.is-win b{color:var(--ok)}
.im-size.is-win small{color:var(--ok)}

.im-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.im-btns button{padding:11px 8px;font-size:11.5px}
.im-save{display:flex;gap:6px}
.im-save input{flex:1;min-width:0}

/* Botones y controles siempre legibles en claro y oscuro */
.im-controls .im-check,.im-save button{color:var(--txt)}
.im-controls select,.im-save input{background:var(--input-bg,var(--panel2));color:var(--txt);border:1px solid var(--border)}
.im-btns button{color:var(--txt)}
.im-btns button.ok{color:#04222a}

@media(max-width:900px){
  .im-work{grid-template-columns:1fr}
  .im-canvas-box{min-height:230px}
}
@media(max-width:720px){
  .im-shell{gap:12px}
  .im-work{gap:12px}
  .im-drop{padding:24px 12px}
  .im-drop-ico{font-size:26px}
  .im-drop-in b{font-size:13px}
  .im-drop-in span{font-size:10.5px}
  .im-canvas-box{min-height:190px;max-height:330px;padding:8px}
  .im-canvas-head{flex-wrap:wrap;gap:6px}
  .im-controls{gap:10px}
  .im-controls label{font-size:10.5px}
  .im-sizes{gap:6px}
  .im-size{padding:8px 6px}
  .im-size b{font-size:12.5px}
  .im-btns{grid-template-columns:1fr;gap:6px}
  .im-btns button{padding:12px 8px}
  .im-save{flex-direction:column}
  .im-save button{width:100%;padding:10px}
}


/* Varita para borrar a mano lo que el automático deja */
.im-varita { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.im-varita button { flex: 1 1 auto; }
.im-varita button.is-on {
  background: var(--cy) !important;
  color: #04222a !important;
  border-color: var(--cy) !important;
  font-weight: 800;
}
@media (max-width: 720px) { .im-varita button { flex: 1 1 100%; } }

/* El boton de PNG usa la clase .no, que en oscuro quedaba blanco sobre blanco */
.im-btns button.no,
#imDlPng {
  background: var(--panel2) !important;
  color: var(--txt) !important;
  border: 1px solid var(--border) !important;
  font-weight: 700;
}
.im-btns button.no:hover, #imDlPng:hover { border-color: var(--cy) !important; color: var(--cy) !important; }
.im-btns button.ok, #imDlWebp { background: var(--cy) !important; color: #04222a !important; border: 0 !important; }
#imReset, #imGuardarLib { background: var(--panel2) !important; color: var(--txt) !important; border: 1px solid var(--border) !important; }