/* ====== Editor de imagen (contenido de la modal) ====== */
/* Se apoya en las variables globales ya definidas en :root */

.app-modal__body > .imgedit-root{
  /* Asegura que el grid del editor ocupe toda el área disponible del body */
  height: 100%;
}

/* Grid principal: 2 columnas (60%/40%) */
.imgedit-root{
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); /* ≈60/40 con mínimo útil de 280px en menú */
  gap: 12px;
  height: 100%;
  min-height: 320px;
}

/* Columna izquierda: AHORA solo 1 sección visible (resultado),
   y el "original" flota como thumbnail en la esquina superior derecha */
.imgedit-col-left{
  position: relative;
  display: grid;
  grid-template-rows: 1fr;   /* solo una fila: el resultado */
  gap: 12px;
  min-height: 0;             /* evita overflow del grid */
}

/* --- Thumbnail flotante (la PRIMERA sección de la izquierda = original) --- */
.imgedit-col-left > .imgedit-section:first-child{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  padding: 4px;
  z-index: 3;
  pointer-events: none;            /* no bloquea clics del SVG debajo */
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: 8px;

  /* que el interior solo deje espacio al canvas */
  display: grid;
  grid-template-rows: 0 1fr;       /* ocultamos el espacio del título */
}

/* ocultar título del bloque flotante */
.imgedit-col-left > .imgedit-section:first-child .imgedit-title{
  display: none;
}

/* el contenedor del canvas del flotante sin padding extra y sin scroll */
.imgedit-col-left > .imgedit-section:first-child .imgedit-canvaswrap{
  padding: 0;
  overflow: hidden;
  height: 40px;
}

/* el canvas del flotante ocupa exactamente 50×50 (contenedor) */
.imgedit-col-left > .imgedit-section:first-child .imgedit-canvaswrap canvas{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
}

/* --- Sección de RESULTADO (la SEGUNDA sección de la izquierda) --- */
.imgedit-col-left > .imgedit-section:last-child{
  height: 100%;
}
.imgedit-col-left > .imgedit-section:last-child .imgedit-preview{
  height: 100%;
}

/* Títulos y tarjetas/secciones */
.imgedit-title{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.imgedit-section{
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

/* Contenedores de contenido con scroll interno y marco */
.imgedit-canvaswrap,
.imgedit-preview{
  position: relative;
  background: #0b0f14;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

/* Canvas y SVG se adaptan al contenedor (resultado) */
.imgedit-canvaswrap canvas{
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  margin: 0 auto;
}

.imgedit-preview svg{
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  margin: 0 auto;
}

/* Hint/ayuda */
.imgedit-hint{
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 8px;
}

/* Spinner sobre el preview (aparece cuando el JS cambia display) */
.imgedit-spinner{
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: none;               /* el JS lo pone en 'flex' al procesar */
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: var(--shadow);
  font-size: 12px;
  color: var(--text);
}
.imgedit-spinner .dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-top-color: transparent;
  animation: imgedit-spin .8s linear infinite;
}
@keyframes imgedit-spin{ to { transform: rotate(360deg); } }

/* Columna derecha: menú con scroll independiente */
.imgedit-menu{
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px;
  min-height: 0;
  overflow: auto;              /* scroll solo del menú */
  display: grid;
  align-content: start;
  gap: 10px;
}

/* Toolbar y bloques de controles */
.imgedit-toolbar,
.imgedit-controls{
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.imgedit-row{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  align-items: center;
}

/* Distribuciones cómodas por tipo de control */
.imgedit-row > .imgedit-label{ grid-column: span 4; color: var(--muted); font-size: 12px; }
.imgedit-row > .imgedit-number{ grid-column: span 4; }
.imgedit-row > .imgedit-check{ grid-column: span 1; justify-self: start; }
.imgedit-row > .imgedit-range{ grid-column: span 8; }

/* Fila de herramientas (botones + tolerancia) */
.imgedit-toolbar .imgedit-row{
  grid-template-columns: auto auto auto 1fr auto;
}

/* Inputs y botones coherentes con el tema */
.imgedit-number,
.imgedit-range{
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px 8px;
  outline: none;
}

.imgedit-number:focus,
.imgedit-range:focus{
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(31,111,235,.15);
}

.imgedit-btn{
  background: #111723;
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.imgedit-btn:hover{
  box-shadow: 0 0 0 3px rgba(31,111,235,.12);
  border-color: #2a3650;
}
.imgedit-btn:active{ transform: translateY(1px); }
.imgedit-btn:disabled{ opacity: .6; cursor: not-allowed; }

.imgedit-btn--primary{
  background: linear-gradient(180deg, var(--accent, #2ea043), #278a39);
  border-color: #2a8a3e;
  color: #fff;
}
.imgedit-btn--secondary{
  background: var(--panel-2);
  border-color: var(--card-border);
}

/* Estado activo para herramientas */
.imgedit-btn.active{
  box-shadow: 0 0 0 2px rgba(31,111,235,.25);
  border-color: var(--accent-2);
}

/* Scrollbars (a juego con el tema) */
.imgedit-menu,
.imgedit-canvaswrap,
.imgedit-preview{
  scrollbar-width: thin;
  scrollbar-color: #273042 #0e141c; /* Firefox */
}
.imgedit-menu::-webkit-scrollbar,
.imgedit-canvaswrap::-webkit-scrollbar,
.imgedit-preview::-webkit-scrollbar{
  width: 10px; height: 10px;
}
.imgedit-menu::-webkit-scrollbar-track,
.imgedit-canvaswrap::-webkit-scrollbar-track,
.imgedit-preview::-webkit-scrollbar-track{
  background: #0e141c; border-radius: 10px;
}
.imgedit-menu::-webkit-scrollbar-thumb,
.imgedit-canvaswrap::-webkit-scrollbar-thumb,
.imgedit-preview::-webkit-scrollbar-thumb{
  background: #273042; border-radius: 10px; border: 2px solid #0e141c;
}
.imgedit-menu::-webkit-scrollbar-thumb:hover,
.imgedit-canvaswrap::-webkit-scrollbar-thumb:hover,
.imgedit-preview::-webkit-scrollbar-thumb:hover{
  background:#334155;
}

/* ====== Responsivo ====== */
/* Tablets/medianos: apilar si no hay ancho; el thumbnail sigue flotando sobre el resultado */
@media (max-width: 980px){
  .imgedit-root{
    grid-template-columns: 1fr;    /* apilar columnas */
    grid-auto-rows: auto;
  }
  .imgedit-menu{
    max-height: 40vh;              /* limita altura del menú apilado */
  }
}

/* Pantallas muy pequeñas: compactar paddings y radios */
@media (max-width: 600px){
  .imgedit-section,
  .imgedit-menu,
  .imgedit-canvaswrap,
  .imgedit-preview{
    border-radius: 10px;
    padding: 8px;
  }
  .imgedit-title{ font-size: 11px; }
  .imgedit-row{ gap: 6px; }
}