/* WaifuStudio — Estilos de la Pestaña Upscaler
 * Qué hace: contenedor de galería y paginación de resultados escalados/interpolados.
 * Qué no hace: no gestiona el lienzo ni estilos de otras pestañas.
 * Dependencias: static/css/base.css y static/css/components.css.
 */

.upscaler-gallery {
  margin-top: 0.6rem;
}

.upscaler-gallery .image-thumbs {
  margin-top: 0;
}

.upscaler-gallery-pager {
  justify-content: flex-start;
  margin-top: 0.5rem;
}

/* M18-11: Viewport al 100% y comparador en Upscaler */
#panel-upscaler.active {
  display: grid !important;
  grid-template-columns: 380px 1fr !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  gap: 1rem !important;
}

#panel-upscaler .gallery-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  position: relative !important;
}

#panel-upscaler #upscale-preview {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  background: #0e0f13 !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

#panel-upscaler #upscale-preview img,
#panel-upscaler #upscale-preview video {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}