/* NexSell — Fotos fáciles (pegar, arrastrar y soltar, o usar un link).
   Usa las variables del tema para verse bien en claro y oscuro. No cambia el
   resto de la app: solo la zona de foto del producto, la miniatura de la
   variante al arrastrar y la foto chica del historial de Ventas. */

#prodPhotoGroup .nxfoto-zona {
  border: 1.5px dashed var(--border-strong, var(--border-color));
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-tertiary);
  transition: border-color .15s ease, background .15s ease;
}
#prodPhotoGroup .nxfoto-zona.nx-foto-drop {
  border-color: var(--accent-primary);
  border-style: solid;
  background: var(--accent-soft, rgba(22, 199, 132, .10));
}
#prodPhotoGroup .nxfoto-elegir {
  width: 100%;
  justify-content: center;
}
#prodPhotoGroup .nxfoto-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#prodPhotoGroup .nxfoto-o {
  font-size: 12px;
  color: var(--text-muted);
}
#prodPhotoGroup .nxfoto-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#prodPhotoGroup .nxfoto-link-lbl {
  font-size: 12px;
  color: var(--text-muted);
  flex: none;
}
#prodPhotoGroup .nxfoto-link-row .form-control {
  flex: 1 1 160px;
  min-width: 0;
}

/* Miniatura de variante al arrastrar una imagen encima. */
#products .prod-var-foto.nx-foto-drop {
  border-color: var(--accent-primary);
  border-style: solid;
  background: var(--accent-soft, rgba(22, 199, 132, .10));
}

/* Foto chica en el historial de Ventas (28 px, misma búsqueda que Envíos). */
.venta-producto-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
}
.venta-producto-txt { min-width: 0; }
.venta-mini {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  flex: none;
}

@media (max-width: 430px) {
  #prodPhotoGroup .nxfoto-zona { padding: 10px; }
  #prodPhotoGroup .nxfoto-link-row .form-control { flex-basis: 100%; }
  #prodPhotoGroup .nxfoto-elegir { padding-left: 8px; padding-right: 8px; }
}